第 1 步 - 创建提供模糊效果的材质

在本步骤中，您将创建提供高斯模糊效果的材质。

教程资产

本教程的起点资料是存储在 <KanziWorkspace>/Tutorials/Blur/Start 目录中的 Blur.kzproj Kanzi Studio 工程文件。

<KanziWorkspace>/Tutorials/Blur/Completed 目录包含本教程已完成的 Kanzi Studio 工程。

创建提供模糊效果的材质

在本节中，您将首先创建支持定向高斯模糊效果的材质类型，然后创建能用于应用该效果到 3D 内容的材质。

要创建提供模糊效果的材质：

1. 在 Kanzi Studio 中打开存储在 <KanziWorkspace>/Tutorials/Blur/Start 目录中的工程。
   
2. 在素材库 (Library) > 材质和纹理 (Materials and Textures) 中按下 Alt 并右键点击 材质类型 (Material Types)，然后选择 DefaultBlit。
   
3. 在 素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中选择 DefaultBlit 材质类型，按下 F2 键并将该材质类型重命名为 DirectionalBlur。
   
4. 在 素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) > DirectionalBlur 材质类型中，双击 片段着色器 (Fragment Shader) 以在 着色器源编辑器 (Shader Source Editor) 中打开它。
   
5. 在 着色器源编辑器 (Shader Source Editor) 中，用本步骤中的着色器代码替换片段着色器文件的内容，并点击 保存 (Save)。
   这种片段着色器可实现定向高斯模糊。

   precision mediump float;
   
   uniform sampler2D Texture0;
   uniform lowp float BlendIntensity;
   
   uniform mediump vec2 kzTextureSize0;
   
   //定义应用模糊的方向（x 或 y 轴）。
   uniform lowp vec2 BlurDirection;
   //确定模糊强度。
   uniform mediump float BlurRadius;
   
   //定义从顶点着色器传递的纹理坐标特性。
   varying mediump vec2 vTexCoord;
   
   vec4 gaussianBlur(mediump vec2 coord, lowp vec2 dir)
   {
       //定义含 9 个示例的一维高斯核。
       float GAUSSIAN_KERNEL[9];
       GAUSSIAN_KERNEL[0] = 0.028532;
       GAUSSIAN_KERNEL[1] = 0.067234;
       GAUSSIAN_KERNEL[2] = 0.124009;
       GAUSSIAN_KERNEL[3] = 0.179044;
       GAUSSIAN_KERNEL[4] = 0.20236;
       GAUSSIAN_KERNEL[5] = 0.179044;
       GAUSSIAN_KERNEL[6] = 0.124009;
       GAUSSIAN_KERNEL[7] = 0.067234;
       GAUSSIAN_KERNEL[8] = 0.028532;
   
       vec2 texel = 1.0/kzTextureSize0;
       vec4 sum = vec4(0.0);
       //获取这个片段的原始纹理坐标。
       vec2 tc = coord;
       //获取模糊量。
       float blur = BlurRadius;
       //设置水平方向的模糊量。
       float hstep = dir.x*texel.x;
       //设置垂直方向的模糊量。
       float vstep = dir.y*texel.y;
   
       // 为每个片段采样 9 次纹理。
       for(int i = 0; i < 9; i++)
       {
           float pixelOffset = (float(i) - floor(9.0 * 0.5));
           mediump vec2 coord = vec2(tc.x + pixelOffset * blur * hstep, tc.y + pixelOffset * blur * vstep);
           sum += texture2D(Texture0, coord) * GAUSSIAN_KERNEL[i];
       }
   
       return sum;
   }
   
   void main()
   {
       gl_FragColor = gaussianBlur(vTexCoord, BlurDirection) * BlendIntensity; 
   }

6. 在素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中选择 DirectionalBlur 材质类型并在属性 (Properties) 中点击同步 uniform (Sync with Uniforms) 以创建在着色器中定义的属性，并将其添加到材质类型和使用该类型的材质中。
   
7. 在创建属性类型 (Create Property Type) 对话框中点击是 (Yes) 以创建自定义属性类型 BlurDirection，并在属性类型编辑器 (Property Type Editor) 窗口中设置：
   • 显示名称 (Display Name) 为Blur Direction
   • 编辑器 (Editor) 为2D vector 滑块编辑器 (2D vector slider editor)
   • 上界 (Upper Bound) 属性字段 X 和 Y 为 1
   点击保存 (Save)。
   您使用属性类型来设置渲染通道应用该模糊效果的方向。
   
8. 在创建属性类型 (Create Property Type) 对话框中点击是 (Yes) 以创建自定义属性类型 BlurRadius，并在属性类型编辑器 (Property Type Editor) 窗口中设置：
   • 显示名称 (Display Name) 为Blur Radius
   • 上界 (Upper Bound) 为 5
   • 默认值 (Default Value) 为 1
   点击保存 (Save)。
   您使用属性类型来设置该模糊效果的强度。
   
9. 在 素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) > DirectionalBlur中选择 DefaultBlitMaterial 材质，按下 F2 键并将该材质重命名为 DirectionalBlurMaterial。
   在下一步中，您使用材质将高斯模糊效果应用到工程中的汽车模型。
   

另请参阅

要详细了解关于材质和材质类型的信息，请参阅材质类型和材质。

要详细了解有关渲染器信息，请参阅着色器。

打开导航